<template>
	<popupVue v-if="isShow">
		<view class="wrap-refunse-popup">
			<view class="content-bg flex column align-center">
				<view class="title">
					驳回原因
				</view>
				
				<textarea
					class="textarea"
					placeholder="请输入驳回原因..."
					placeholder-class="place"
					v-model="content"
				/>
			</view>
			
			<view class="btn-bg flex align-center">
				<view class="btn normal" @click.stop="onDismiss">
					取消
				</view>
				
				<view class="line"></view>
				
				<view class="btn active" @click.stop="onSure">
					提交
				</view>
			</view>
		</view>
	</popupVue>
</template>

<script>
	import { refuseRefund } from "@/utils/API.js";
	import popupVue from "../popup/popup.vue";
	
	export default {
		components: {
			popupVue
		},
		props: {
			/**
			 * 是否显示
			 */
			isShow: {
				type: Boolean,
				default: false,
			},
			/**
			 * 订单号
			 */
			orderID: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				content: "", //内容
			}
		},
		methods: {
			/**
			 * 关闭
			 */
			onDismiss() {
				this.$emit("update:isShow", false);
			},
			/**
			 * 确定
			 */
			onSure() {
				if (this.content === "") {
					this.$st.show("请输入拒绝原因");
					return;
				}
				this.$throttle(() => {
					refuseRefund({
						ids: this.orderID,
						refuse_content: this.content,
					}).then(res => {
						this.$st.success("拒绝成功", () => {
							this.$emit("onRefunse");
							this.onDismiss();
						})
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.wrap-refunse-popup {
		width: 522rpx;
		background-color: white;
		border-radius: 16rpx;
		overflow: hidden;
		
		.content-bg {
			padding: 55rpx 24rpx 33rpx;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			gap: 35rpx;
			
			.title {
				color: #333333;
				font-size: 33rpx;
				font-weight: bold;
			}
			
			.textarea {
				width: 100%;
				height: 152rpx;
				background-color: #F7F7F7;
				border-radius: 20rpx;
				overflow: hidden;
				padding: 30rpx;
				color: #333333;
				font-size: 30rpx;
			}
			
			.place {
				color: #999999;
				font-size: 30rpx;
			}
		}
		
		.btn-bg {
			width: 100%;
			border-top: 2rpx solid #DBDBDB;
			
			.btn {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				overflow: hidden;
				font-size: 30rpx;
			}
			
			.normal {
				color: #333333;
			}
			
			.active {
				color: #84BD00;
			}
			
			.line {
				width: 2rpx;
				height: 100rpx;
				background-color: #DBDBDB;
			}
		}
	}
</style>